<template>
  <div class="layout-header">
    <p class="system-title">{{ systemTitle }}</p>
    <i :class="isCollapse ?'el-icon-s-unfold':'el-icon-s-fold'" @click="collapse"></i>
    <slot name="link"></slot>
    <div class="user">
      <el-button @click="changeFullScreen" class="btn-full-screen" type="primary"
                 icon="el-icon-full-screen"></el-button>

      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar class="avatar" icon="el-icon-user-solid"
                     :src="avatarUrl"></el-avatar>
          <span>{{ userName }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <p @click="toUserInfo">个人信息</p>
          </el-dropdown-item>
          <el-dropdown-item>
            <p @click="switchMenu">切换菜单</p>
          </el-dropdown-item>
          <el-dropdown-item>
            <p @click="logout">退出登录</p>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script type="text/javascript">
import bus from '@/common/util/bus'
import { projectTitle, axiosBaseUrl } from '@/common/config/baseConfig'

export default {
  name: 'layoutHeader',
  data () {
    return {
      fullscreen: false,
      avatarUrl: this.$store.getters.userInfo.userAvatar,
      // 是否折叠菜单
      isCollapse: false,
      systemTitle: projectTitle
    }
  },
  computed: {
    userName () {
      return this.$store.getters.userInfo.nick
    }
  },
  methods: {
    // 折叠
    collapse () {
      this.isCollapse = !this.isCollapse
      // 触发折叠按钮事件，并向菜单页传值
      bus.$emit('collapse', this.isCollapse)
    },
    // 退出登录
    logout () {
      const loading = this.$loading({
        lock: true,
        text: '退出登录中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$store.dispatch('user/logout').then(() => {
        loading.close()
        this.$router.push({ path: '/login' })
      })
    },
    toUserInfo () {
      this.$router.push({ path: '/userInfo' })
    },
    switchMenu () {
      this.$emit('switchMenu')
    },
    changeFullScreen () {
      // 全屏切换函数
      const element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen // 判断全屏状态
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
.system-title {
  color: $--color-white;
  font-size: 24px;
  margin-right: 10px;
  /*width: 190px;*/

}

.layout-header {
  height: 100%;
  width: 100%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-icon-s-unfold,
  .el-icon-s-fold {
    font-size: 20px;
    cursor: pointer;
    color: $--color-white;
  }

  .user {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    height: 100%;

    .btn-full-screen {
      font-size: 15px;
      margin-right: 10px;
    }

    ::v-deep .el-dropdown {
      cursor: pointer;
      color: $--color-white;
      display: flex;

      .el-dropdown-link {
        display: flex;
        align-items: center;

        .avatar {
          margin-right: 10px;
          width: 32px;
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }
}
</style>
